<template>
    <nav>
        <ul>
            <router-link to='/movie' tag="li" active-class="on">
                <i class="iconfont icon-dianyingyuan"></i>
                <span>电影</span>
            </router-link>
            <router-link to='/cinema' tag="li" active-class="on"><i class="iconfont icon-yingyuan"></i>
                <span>影院</span></router-link>
            <router-link to='/new' tag="li" active-class="on"><i class="iconfont icon-zixunliuyan"></i>
                <span>资讯</span></router-link>
            <router-link to='/mine' tag="li" active-class="on"><i class="iconfont icon-shouye"></i>
                <span>我的</span></router-link>
        </ul>
    </nav>
</template>

<style lang="scss" scoped>
nav{
    z-index: 1000000;
    width: 100%;
    position: fixed;
    bottom:0;
    left:0;
    height: 50px;
    background-color:#fff;
    text-align: center;
    border-top: 1px solid #ccc;
    ul{ 
        display: flex;
        margin-top:10px;
        li{
            flex: 1;
            display: flex;//回去查查
            flex-direction:column;//回去查查
            color: #797d82;
            span{
                font-size:12px;
            }
            i{
                font-size:22px;
            }
        }
    }
}
.on{
    color:orange;
}
</style>
